.vue<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

// 筛选表单数据模型 - 合同按单提成
const filterForm1 = ref({
  // 服务月份范围
  serviceMonthStart: '',
  serviceMonthEnd: '',
  // 选中的提成类型
  selectedTypes: [],
  // 选中的角色
  selectedRoles: [],
  // 账务完成人
  accountantName: '',
  // 计提人
  accruedBy: '',
  // 记账状态
  accountingStatus: '',
  // 完税状态
  taxStatus: '',
  // 收费状态
  paymentStatus: '',
  // 收费时间范围
  paymentDateStart: '',
  paymentDateEnd: '',
  // 计提人部门
  department: '',
  // 是否包含下级部门
  includeSubDepartments: false,
  // 服务产品
  serviceProduct: '',
  // 合同状态
  contractStatus: '',
  // 合同来源
  contractSource: '',
  // 客户等级
  customerLevel: '',
  // 选中的客户等级
  selectedLevels: [],
  // 客户行业分类
  industry: '',
  // 客户标签
  customerTags: '',
  // 选中的客户标签
  selectedTags: [],
  // 增值税类型
  taxType: ''
});

// 筛选表单数据模型 - 订单按单提成
const filterForm2 = ref({
  // 任务状态
  taskStatus: '',
  // 收费状态
  chargeStatus: '',
  // 计提人
  drawer: '',
  // 计提人部门
  drawerDept: '',
  // 是否包含下级部门
  includeSubDept: false,
  // 服务项
  serviceItem: ''
});

// 提成类型选项
const commissionTypes = ['账务会计', '税务会计', '服务顾问', '审核会计', '开票员'];

// 相关人员角色选项
const roles = ['账务会计', '税务会计', '服务顾问', '审核会计', '开票员'];

// 客户等级示例
const customerLevels = ['VIP客户'];

// 客户标签示例
const exampleTags = ['零申报'];

// 切换提成类型选择
const toggleType = (type) => {
  const index = filterForm1.value.selectedTypes.indexOf(type);
  if (index > -1) {
    filterForm1.value.selectedTypes.splice(index, 1);
  } else {
    filterForm1.value.selectedTypes.push(type);
  }
};

// 切换角色选择
const toggleRole = (role) => {
  const index = filterForm1.value.selectedRoles.indexOf(role);
  if (index > -1) {
    filterForm1.value.selectedRoles.splice(index, 1);
  } else {
    filterForm1.value.selectedRoles.push(role);
  }
};

const handleBatchSet = () => {
  ElMessage({
    message: '批量设置提成功能已触发',
    type: 'primary',
    plain: true,
  })
};

const handleExport = () => {
  ElMessage({
    message: '数据导出功能已触发',
    type: 'success',
    plain: true,
  })
};

// 切换客户等级选择
const toggleLevel = (level) => {
  const index = filterForm1.value.selectedLevels.indexOf(level);
  if (index > -1) {
    filterForm1.value.selectedLevels.splice(index, 1);
  } else {
    filterForm1.value.selectedLevels.push(level);
  }
};

// 切换客户标签选择
const toggleTag = (tag) => {
  const index = filterForm1.value.selectedTags.indexOf(tag);
  if (index > -1) {
    filterForm1.value.selectedTags.splice(index, 1);
  } else {
    filterForm1.value.selectedTags.push(tag);
  }
};

// 重置筛选条件
const resetFilter = () => {
  // 根据当前激活的Tab重置对应的筛选表单
  if (activeName.value === 'first') {
    // 重置合同按单提成筛选表单
    filterForm1.value = {
      serviceMonthStart: '',
      serviceMonthEnd: '',
      selectedTypes: [],
      selectedRoles: [],
      accountantName: '',
      accruedBy: '',
      accountingStatus: '',
      taxStatus: '',
      paymentStatus: '',
      paymentDateStart: '',
      paymentDateEnd: '',
      department: '',
      includeSubDepartments: false,
      serviceProduct: '',
      contractStatus: '',
      contractSource: '',
      customerLevel: '',
      selectedLevels: [],
      industry: '',
      customerTags: '',
      selectedTags: [],
      taxType: ''
    };
  } else if (activeName.value === 'second') {
    // 重置订单按单提成筛选表单
    filterForm2.value = {
      taskStatus: '',
      chargeStatus: '',
      drawer: '',
      drawerDept: '',
      includeSubDept: false,
      serviceItem: ''
    };
  }
};

// 应用筛选条件
const applyFilter = () => {
  // 根据当前激活的Tab应用对应的筛选条件
  if (activeName.value === 'first') {
    console.log('应用合同按单提成筛选条件:', filterForm1.value);
    // 这里可以添加合同按单提成的筛选逻辑
  } else if (activeName.value === 'second') {
    console.log('应用订单按单提成筛选条件:', filterForm2.value);
    // 这里可以添加订单按单提成的筛选逻辑
  }
};

const input2 = ref('')
const mockData = ref([]);
const loading = ref(true);
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);
    // 切换Tab时不需要额外处理，因为我们使用条件渲染来控制显示

        loading.value = false
    }

const tableData = ref([
  {
    id1: '1',
    contractInfo1: 'A客户年度服务合同',
    incomeExpenseNo1: 'SZ202402001',
    incomeExpenseItem1: '服务费',
    incomeExpenseAmount1: 50000,
    incomeExpenseTime1: '2024-02-15',
    commissionMonth1: '2024-02',
    drawer1: '张三',
    commissionRatio1: '10%',
    commissionAmount1: 5000,
    drawerDept1: '九江研发团队'
  },
  {
    id1: '2',
    contractInfo1: 'B公司代理记账合同',
    incomeExpenseNo1: 'SZ202402002',
    incomeExpenseItem1: '服务费',
    incomeExpenseAmount1: 30000,
    incomeExpenseTime1: '2024-02-16',
    commissionMonth1: '2024-02',
    drawer1: '李四',
    commissionRatio1: '8%',
    commissionAmount1: 2400,
    drawerDept1: '九江研发团队'
  },
  {
    id1: '3',
    contractInfo1: 'C企业税务筹划合同',
    incomeExpenseNo1: 'SZ202403001',
    incomeExpenseItem1: '预付款',
    incomeExpenseAmount1: 20000,
    incomeExpenseTime1: '2024-03-10',
    commissionMonth1: '2024-03',
    drawer1: '王五',
    commissionRatio1: '5%',
    commissionAmount1: 1000,
    drawerDept1: '九江研发团队'
  },
  {
    id1: '4',
    contractInfo1: 'D集团财务咨询合同',
    incomeExpenseNo1: 'SZ202403002',
    incomeExpenseItem1: '服务费',
    incomeExpenseAmount1: 15000,
    incomeExpenseTime1: '2024-02-20',
    commissionMonth1: '2024-03',
    drawer1: '赵六',
    commissionRatio1: '3000',
    commissionAmount1: 3000,
    drawerDept1: '九江研发团队'
  },
  {
    id1: '5',
    contractInfo1: 'E科技公司审计合同',
    incomeExpenseNo1: 'SZ202403003',
    incomeExpenseItem1: '服务费',
    incomeExpenseAmount1: 40000,
    incomeExpenseTime1: '2024-03-15',
    commissionMonth1: '2024-03',
    drawer1: '张三',
    commissionRatio1: '3%',
    commissionAmount1: 1200,
    drawerDept1: '九江研发团队'
  }
]);
const commissionData = ref([
  {
    id2: '1',
    orderInfo2: "A客户企业年报审计订单",
    incomeExpenseNo2: 'SZ202404001',
    incomeExpenseItem2: '服务费',
    incomeExpenseAmount2: 50000,
    incomeExpenseTime2: '2024-03-22',
    commissionMonth2: "2024-04",
    drawer2: "张三",
    commissionRatio2: "5%",
    commissionAmount2: 2500,
    drawerDept2: "九江研发团队"
  },
  {
    id2: '2',
    orderInfo2: "B公司税务筹划方案订单",
    incomeExpenseNo2: 'SZ202405001',
    incomeExpenseItem2: '预付款',
    incomeExpenseAmount2: 30000,
    incomeExpenseTime2: '2024-04-30',
    commissionMonth2: "2024-05",
    drawer2: "孙七",
    commissionRatio2: "1200元",
    commissionAmount2: 1200,
    drawerDept2: "九江研发团队"
  },
  {
    id2: '3',
    orderInfo2: "C集团财务尽调订单",
    incomeExpenseNo2: 'SZ202407001',
    incomeExpenseItem2: '服务费',
    incomeExpenseAmount2: 120000,
    incomeExpenseTime2: '2024-06-15',
    commissionMonth2: "2024-07",
    drawer2: "钱十一",
    commissionRatio2: "4.5%",
    commissionAmount2: 5400,
    drawerDept2: "九江研发团队"
  }
]);

</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="合同推荐提成" name="first"></el-tab-pane>
                    <el-tab-pane label="订单推荐提成" name="second"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="top-filter-right">
                <el-button type="primary" @click="handleBatchSet">批量设置提成</el-button>
                <el-button type="primary" @click="handleExport">导出</el-button>
            </div>
        </div>
        <!-- 合同按单提成内容 -->
        <div v-if="activeName === 'first'" class="table-area">
  <!-- 表格筛选与表格区域 -->
  <div class="table-area-tab">
    <!-- 顶部筛选栏 -->
    <div class="top-filter">
      <div class="top-filter-left">
        <!-- 筛选弹窗组件 -->
        <stick-popup>
          <!-- 弹窗触发按钮 -->
          <template #show>
            <div class="top-filter-btn">
              <div class="top-filter-btn-label">
                筛选
              </div>
              <div class="top-filter-btn-icon">
                <Operation />
              </div>
            </div>
          </template>

          <!-- 弹窗内容：筛选表单 -->
          <template #content>
            <div class="top-filter-form">
              <el-form 
                :model="filterForm1" 
                label-width="100px" 
                class="filter-form"
              >
                <!-- 计提人 -->
                <el-form-item label="计提人">
                  <el-select
                          v-model="filterForm1.drawer"
                          placeholder="请选择计提人"
                          style="width: 200px;"
                        >
                          <el-option label="张三" value="张三"></el-option>
                          <el-option label="李四" value="李四"></el-option>
                          <el-option label="王五" value="王五"></el-option>
                          <el-option label="赵六" value="赵六"></el-option>
                  </el-select>
                </el-form-item>

                <!-- 收支时间 -->
                <el-form-item label="收支时间">
                  <div class="date-range">
                    <el-date-picker
                      v-model="filterForm1.paymentDateStart"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 140px"
                    />
                    <span style="margin: 0 10px">到</span>
                    <el-date-picker
                      v-model="filterForm1.paymentDateEnd"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 140px"
                    />
                  </div>
                </el-form-item>

                <!-- 计提人部门 -->
                <el-form-item label="计提人部门">
                    <el-select
                          v-model="filterForm1.department"
                          multiple
                          placeholder="请选择计提人部门"
                          style="width: 200px;"
                        >
                          <el-option label="百帐汇（广州）科技有限公司" value="bzhk1"></el-option>
                          <el-option label="九江研发部门" value="other1"></el-option>
                          <el-option label="内帐" value="finance1"></el-option>
                          <el-option label="江西日月眼镜" value="sales1"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 部门包含下级 -->
                <el-form-item>
                  <el-checkbox v-model="filterForm1.includeSubDepartments">部门包含下级</el-checkbox>
                </el-form-item>

                <!-- 服务产品 -->
                <el-form-item label="服务产品">
                  <el-select
                          v-model="filterForm1.serviceProducts"
                          multiple
                          placeholder="请选择服务产品"
                          style="width: 200px;"
                        >
                          <el-option label="自定义代账合同" value="contract"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 合同状态 -->
                <el-form-item label="合同状态">
                  <div class="radio-group">
                    <el-radio v-model="filterForm1.contractStatus" :label="''">全部</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="待提交">待提交</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="待审核">待审核</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="审核不通过">审核不通过</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="待财务审核">待财务审核</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="财务审核不通过">财务审核不通过</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="执行中">执行中</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="已结束">已结束</el-radio>
                    <el-radio v-model="filterForm1.contractStatus" label="已终止">已终止</el-radio>
                  </div>
                </el-form-item>

                <!-- 合同来源 -->
                <el-form-item label="合同来源">
                  <el-select 
                    v-model="filterForm1.contractSource" 
                    placeholder="请选择"
                  >
                    <el-option label="张三" value="1" />
                    <el-option label="李四" value="2" />
                    <el-option label="其他" value="other" />
                  </el-select>
                </el-form-item>

                <!-- 客户等级 -->
                <el-form-item label="客户等级">
                  <el-select 
                    multiple
                    v-model="filterForm1.customerLevel" 
                    placeholder="请选择"
                  >
                    <el-option label="一般客户" value="1" />
                    <el-option label="重要客户" value="2" />
                    <el-option label="VIP客户" value="3" />
                    <el-option label="特殊客户" value="4" />
                  </el-select>
                </el-form-item>

                <!-- 客户行业分类 -->
                <el-form-item label="客户行业分类">
                  <el-select 
                    multiple
                    v-model="filterForm1.customerIndustry" 
                    placeholder="请选择"
                  >
                    <el-option label="制造业" value="manufacturing" />
                    <el-option label="零售业" value="retail" />
                    <el-option label="采矿业" value="mining" />
                    <el-option label="农林牧业" value="agriculture" />
                  </el-select>

                </el-form-item>
                <!-- 客户标签 -->
                <el-form-item label="客户标签">
                  <el-select 
                    multiple
                    v-model="filterForm1.customerTags" 
                    placeholder="请选择"
                  >
                    <el-option label="零申报、无社保" value="none" />
                    <el-option label="天猫网店" value="tmall" />
                    <el-option label="抖音店铺" value="douyin" />
                    <el-option label="拼多多店铺" value="pinduoduo" />
                  </el-select>
                </el-form-item>

                <!-- 增值税类型 -->
                <el-form-item label="增值税类型">
                  <div class="radio-group">
                    <el-radio v-model="filterForm1.taxType" :label="''">全部</el-radio>
                    <el-radio v-model="filterForm1.taxType" label="一般纳税人">一般纳税人</el-radio>
                    <el-radio v-model="filterForm1.taxType" label="小规模纳税人">小规模纳税人</el-radio>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </template>

          <!-- 弹窗底部：操作按钮 -->
          <template #footer>
            <div class="top-filter-operate">
              <el-button @click="resetFilter">重置</el-button>
              <el-button type="primary" @click="applyFilter">确认</el-button>
            </div>
          </template>
        </stick-popup>

        <!-- 快捷筛选：提成月份+搜索框 -->
        <div class="block">
          <span class="demonstration">提成月份</span>
          <el-date-picker
            v-model="value1"
            type="monthrange"
            range-separator="To"
            start-placeholder="开始月份 "
            end-placeholder="结束月份"
          />
          <el-input
            v-model="input2"
            class="responsive-input"
            placeholder="客户简称或编号或合同编号"
            :prefix-icon="Search"
          />
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-area-table">
        <el-table 
          ref="multipleTableRef"  
          :data="tableData" 
          row-key="id1" 
          style="width: 100%" 
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :selectable="selectable" width="55" />
          <el-table-column prop="contractInfo1" label="合同信息" width="150" />
          <el-table-column prop="incomeExpenseNo1" label="收支编号" width="120" />
          <el-table-column prop="incomeExpenseItem1" label="收支项" width="120" />
          <el-table-column prop="incomeExpenseAmount1" label="收支金额" width="120" />
          <el-table-column prop="incomeExpenseTime1" label="收支时间" width="140" />
          <el-table-column prop="commissionMonth1" label="提成月份" width="120" />
          <el-table-column prop="drawer1" label="计提人" width="100" />
          <el-table-column prop="commissionRatio1" label="提成比例/固定金额" width="150" />
          <el-table-column prop="commissionAmount1" label="提成金额" width="120" />
          <el-table-column prop="drawerDept1" label="计提人部门" width="130" />
        </el-table>
      </div>
    </div>
  </div>

         
        <!-- 订单按单提成内容 -->
        <div v-else-if="activeName === 'second'" class="table-area">
          <!-- 表格筛选与表格区域 -->
          <div class="table-area-tab">
            <!-- 顶部筛选栏 -->
            <div class="top-filter">
              <div class="top-filter-left">
                <!-- 筛选弹窗组件 -->
                <stick-popup>
                  <!-- 弹窗触发按钮 -->
          <template #show>
            <div class="top-filter-btn">
              <div class="top-filter-btn-label">
                筛选
              </div>
              <div class="top-filter-btn-icon">
                <Operation />
              </div>
            </div>
          </template>

          <!-- 弹窗内容：筛选表单 -->
          <template #content>
            <div class="top-filter-form">
              <el-form 
                :model="filterForm1" 
                label-width="100px" 
                class="filter-form"
              >
                <!-- 计提人 -->
                <el-form-item label="计提人">
                  <el-select
                          v-model="filterForm2.drawer"
                          placeholder="请选择计提人"
                          style="width: 200px;"
                        >
                          <el-option label="张三" value="张三"></el-option>
                          <el-option label="李四" value="李四"></el-option>
                          <el-option label="王五" value="王五"></el-option>
                          <el-option label="赵六" value="赵六"></el-option>
                  </el-select>
                </el-form-item>

                <!-- 收支时间 -->
                <el-form-item label="收支时间">
                  <div class="date-range">
                    <el-date-picker
                      v-model="filterForm2.paymentDateStart"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 140px"
                    />
                    <span style="margin: 0 10px">到</span>
                    <el-date-picker
                      v-model="filterForm2.paymentDateEnd"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 140px"
                    />
                  </div>
                </el-form-item>

                <!-- 计提人部门 -->
                <el-form-item label="计提人部门">
                    <el-select
                          v-model="filterForm1.department"
                          multiple
                          placeholder="请选择计提人部门"
                          style="width: 200px;"
                        >
                          <el-option label="百帐汇（广州）科技有限公司" value="bzhk1"></el-option>
                          <el-option label="九江研发部门" value="other1"></el-option>
                          <el-option label="内帐" value="finance1"></el-option>
                          <el-option label="江西日月眼镜" value="sales1"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 部门包含下级 -->
                <el-form-item>
                  <el-checkbox v-model="filterForm2.includeSubDepartments">部门包含下级</el-checkbox>
                </el-form-item>

                <!-- 服务产品 -->
                <el-form-item label="服务产品">
                  <el-select
                          v-model="filterForm2.serviceProducts"
                          multiple
                          placeholder="请选择服务产品"
                          style="width: 200px;"
                        >
                          <el-option label="自定义代账合同" value="contract"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 合同状态 -->
                <el-form-item label="合同状态">
                  <div class="radio-group">
                    <el-radio v-model="filterForm2.contractStatus" :label="''">全部</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="待提交">待提交</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="待审核">待审核</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="审核不通过">审核不通过</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="待财务审核">待财务审核</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="财务审核不通过">财务审核不通过</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="执行中">执行中</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="已结束">已结束</el-radio>
                    <el-radio v-model="filterForm2.contractStatus" label="已终止">已终止</el-radio>
                  </div>
                </el-form-item>

                <!-- 合同来源 -->
                <el-form-item label="合同来源">
                  <el-select 
                    v-model="filterForm2.contractSource" 
                    placeholder="请选择"
                  >
                    <el-option label="张三" value="1" />
                    <el-option label="李四" value="2" />
                    <el-option label="其他" value="other" />
                  </el-select>
                </el-form-item>

                <!-- 客户等级 -->
                <el-form-item label="客户等级">
                  <el-select 
                    multiple
                    v-model="filterForm2.customerLevel" 
                    placeholder="请选择"
                  >
                    <el-option label="一般客户" value="1" />
                    <el-option label="重要客户" value="2" />
                    <el-option label="VIP客户" value="3" />
                    <el-option label="特殊客户" value="4" />
                  </el-select>
                </el-form-item>

                <!-- 客户行业分类 -->
                <el-form-item label="客户行业分类">
                  <el-select 
                    multiple
                    v-model="filterForm2.customerIndustry" 
                    placeholder="请选择"
                  >
                    <el-option label="制造业" value="manufacturing" />
                    <el-option label="零售业" value="retail" />
                    <el-option label="采矿业" value="mining" />
                    <el-option label="农林牧业" value="agriculture" />
                  </el-select>

                </el-form-item>
                <!-- 客户标签 -->
                <el-form-item label="客户标签">
                  <el-select 
                    multiple
                    v-model="filterForm2.customerTags" 
                    placeholder="请选择"
                  >
                    <el-option label="零申报、无社保" value="none" />
                    <el-option label="天猫网店" value="tmall" />
                    <el-option label="抖音店铺" value="douyin" />
                    <el-option label="拼多多店铺" value="pinduoduo" />
                  </el-select>
                </el-form-item>

                <!-- 增值税类型 -->
                <el-form-item label="增值税类型">
                  <div class="radio-group">
                    <el-radio v-model="filterForm2.taxType" :label="''">全部</el-radio>
                    <el-radio v-model="filterForm2.taxType" label="一般纳税人">一般纳税人</el-radio>
                    <el-radio v-model="filterForm2.taxType" label="小规模纳税人">小规模纳税人</el-radio>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </template>

                  <!-- 弹窗底部按钮 -->
                  <template #footer>
                    <div class="dialog-footer">
                      <el-button @click="resetFilter">重置</el-button>
                      <el-button type="primary" @click="applyFilter">确认</el-button>
                    </div>
                  </template>
                </stick-popup>
                
                <div class="block">
          <span class="demonstration">提成月份</span>
          <el-date-picker
            v-model="value1"
            type="monthrange"
            range-separator="To"
            start-placeholder="开始月份 "
            end-placeholder="结束月份"
          />
          <el-input
            v-model="input2"
            class="responsive-input"
            placeholder="客户简称或编号或项目名称"  
            :prefix-icon="Search"
          />
        </div>
              </div>
            </div>
          </div>
          
          <!-- 表格区域 -->
          <div class="table-area-table">
            <el-table v-loading="loading" ref="multipleTableRef" :data="commissionData" style="width: 100%" row-key="id2">
                <el-table-column type="selection" width="55" :selectable="selectable" />
                <el-table-column prop="orderInfo2" label="订单信息" width="150" />
                <el-table-column prop="incomeExpenseNo2" label="收支编号" width="120" />
                <el-table-column prop="incomeExpenseItem2" label="收支项" width="120" />
                <el-table-column prop="incomeExpenseAmount2" label="收支金额" width="120" />
                <el-table-column prop="incomeExpenseTime2" label="收支时间" width="140" />
                <el-table-column prop="commissionMonth2" label="提成月份" width="120" />
                <el-table-column prop="drawer2" label="计提人" width="100" />
                <el-table-column prop="commissionRatio2" label="提成比例/固定金额" width="150" />
                <el-table-column prop="commissionAmount2" label="提成金额" width="120" />
                <el-table-column prop="drawerDept2" label="计提人部门" width="130" />
            </el-table>
          </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 20%;
                height: 20%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.responsive-input {
  width: 240px;
  margin: 10px;
}
</style>